<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="joneywon">
  <title>DEMO</title>
    <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.serialize-object.min.js" type="text/javascript"></script>

    
    <style>
        table,table tr th, table tr td {
            border:1px solid #0094ff;
        }
        table {
            width: auto;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
            padding:1px;
        }

		div.panel{
		 height:100px;
		 text-align: center;
		 vertical-align: middle;
		 line-height: 100px;
		 font-size: 100px;
		 font-weight: bold;
		}        
    </style>
 </head>
 <body>
 <form id="editForm">
	<table align="center">
	<tr>
		<td>ID</td>
		<td><input type="text" name="id"/></td>
	</tr>
	<tr>
		<td>NAME</td>
		<td><input type="text" name="name"/></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input type="button" value="submit" id="btn"/></td>
	</tr>
	</table>
 </form>
  <script type="text/javascript">

	   $(function () {
            $("#btn").click(function () {

				$.ajax({
					type:'OPTIONS',
					contentType: "application/json; charset=utf-8",
					url:"http://localhost:1133/hi?name=12345",
					//data:'name='+$('#editForm').serializeJSON(),
					cache:false,
					dataType:'json',
					success:function(data){
   						alert("data:"+JSON.stringify(data));
					},
					error:function(e) {
						alert(JSON.stringify(e));

					},
					complete:function () {
						alert("complete");
					}
				});
            });
        });

  </script>
 </body>
</html>
